<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预测后连续</title>
    
    <!-- Bootstrap CSS -->
    <link href="/static/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap-Table CSS -->
    <link href="/static/vendor/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">


    <style>
        :root {
            --sidebar-width: 240px;
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
        }
    
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
        }
    
        /* 导航栏美化 */
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
            background: var(--primary-color) !important;
        }
        .navbar-brand {
            font-weight: 600;
            letter-spacing: 1px;
        }
    
        /* 侧边栏美化 */
        .sidebar {
            background: white;
            border-right: 1px solid #eee;
            min-height: calc(100vh - 76px);
            padding: 1rem 0;
            box-shadow: 2px 0 8px rgba(0,0,0,.05);
        }
        .list-group-item {
            border: none;
            border-radius: 0;
            font-weight: 500;
            color: #666;
            transition: all .2s;
        }
        .list-group-item.active {
            background: var(--secondary-color);
            border-color: transparent;
            position: relative;
        }
        .list-group-item.active:after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 60%;
            background: var(--primary-color);
        }
    
        /* 主要内容区域 */
        .main-content {
            padding: 2rem;
            background: #f8f9fa;
        }
    
        /* 工具栏样式 - 确保所有内容在一行 */
        #toolbar {
            display: flex;          /* 使用 Flex 布局 */
            align-items: center;    /* 垂直居中 */
            gap: 10px;             /* 元素间距 */
            flex-wrap: nowrap;     /* 禁止换行 */
            margin-bottom: 15px;
            padding: 10px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        #start-value {
            width: 80px;
            border-radius: 20px;
            border: 1px solid #ddd;
            padding: 0.3rem 1rem;
            text-align: center;
        }
        #filter-group {
            background: #f8f9fa;
            padding: 0.5rem;
            border-radius: 6px;
        }
    
        /* 表格美化 */
        .fixed-table-container {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,.05);
        }
        .bootstrap-table .table {
            margin-bottom: 0;
        }
        .table thead th {
            background: var(--primary-color);
            color: white;
            border-color: transparent !important;
            font-weight: 600;
        }
        .table tbody tr:hover {
            background-color: #f8f9fa !important;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(236, 240, 241,.3);
        }
    
        /* 复选框美化 */
        .form-check-input {
            cursor: pointer;
            margin-top: 0.15rem;
        }
        .form-check-label {
            cursor: pointer;
            user-select: none;
        }
    
        @media (max-width: 768px) {
            .sidebar {
                min-height: auto;
                border-right: none;
                border-bottom: 1px solid #eee;
            }
            #toolbar {
                flex-wrap: wrap;
                gap: 1rem;
            }
        }
        </style>
</head>
<body>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">后台管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3 col-lg-2 bg-light sidebar">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action active">预测后连续</a>
                </div>
            </div>

            <!-- 主要内容 -->
            <div class="col-md-9 col-lg-10 main-content">
                <!-- 工具栏（所有内容强制在一行） -->
                <div id="toolbar">
                    <span>启动值：</span>
                    <input type="text" id="start-value" value="单">
                    
                    <span>连续筛选：</span>
                    <div id="filter-group">
                        <!-- 动态生成的复选框 -->
                    </div>
                </div>
                
                <!-- 表格 -->
                <table id="dataTable"></table>
            </div>
        </div>
    </div>

    <!-- 依赖脚本 -->
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script src="/static/vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="/static/vendor/bootstrap-table/bootstrap-table.min.js"></script>

    <script>
    $(function() {
        var tableData = [];
        var predicts = {};
        var values = {};
        var indexes = [];
        var initVal = 1 ;
        var inited = false;

        var xc = 0;
        var vc = 0;
        var nc = 0;

        let trans = {
            0: "双",
            1: "单",
        }
        let transT = {
            "单": 1, 
            "双": 0,
        }

        let updateTableData = () => {
            fetch('/api/ffk3_trend').then(resp => resp.json()).then(data => {
                data = data.data;
                if (indexes.indexOf(data.num) < 0) {
                    if (!inited) {
                        predicts[data.num] = initVal;
                        inited= true;
                    } 

                    indexes.push(data.num);
                    predicts[data.num + 1] = data.predict;
                    values[data.num] = data.value;

                    tableData = [];

                    xc = 0;
                    vc = 0;
                    nc = 0;

                    for (var index of indexes) {
                        var col;
                        if (trans[predicts[index]] == trans[values[index]]) {
                            vc += 1
                            nc = vc
                            xc = 0
                            col = 'success'
                        } else {
                            xc += 1
                            nc = xc
                            vc = 0
                            col = 'danger'
                        } 
                        tableData.push({
                            issue: index,
                            predict: trans[predicts[index]],
                            actual: trans[values[index]],
                            continuousDisplay: `<span class="badge fs-6 bg-`+ col + `">` + nc + `</span>`,
                            continuous: nc,
                        });
                    }

                    var index = indexes[indexes.length - 1] + 1;
                    tableData.push({
                        issue: `<span class="badge fs-6 bg-warning">` + index + `</span>`,
                        predict: `<span class="badge fs-6 bg-warning">` + trans[predicts[index]] + `</span>`,
                    });

                    tableData.reverse();

                    console.log(tableData, predicts, values, indexes);     
                    $('#dataTable').bootstrapTable('load', tableData);  
                }   
            })
        }
        updateTableData()
        setInterval(updateTableData, 5000);
        
        $('#start-value').change(function() {
            let last = trans[initVal];
            for (const char of $(this).val()) {
              if (char === "单" || char === "双") {
                last = char;
              }
            }
            if (transT[last] != initVal) {
                initVal = transT[last];
                inited = false;
                tableData = [];
                predicts = {};
                values = {};
                indexes = [];
                xc = 0;
                vc = 0;
                nc = 0;
                updateTableData()
            }
            $('#start-value').val(last);
        });

        // 生成复选框
        let checkboxes = '';
        for(let i = 1; i <= 9; i++) {
            checkboxes += `
                <div class="form-check form-check-inline">
                    <input class="form-check-input continuous-filter" type="checkbox" 
                           id="filter-${i}" value="${i}">
                    <label class="form-check-label" for="filter-${i}">${i}</label>
                </div>
            `;
        }
        $('#filter-group').append(checkboxes);

        // 初始化表格
        $('#dataTable').bootstrapTable({
            data: tableData,
            toolbar: '#toolbar',
            columns: [{
                field: 'issue',
                title: '期号'
            }, {
                field: 'predict',
                title: '预测值'
            }, {
                field: 'actual',
                title: '实际值'
            }, {
                field: 'continuous',
                title: '连续',
                visible: false,
            }, {
                field: 'continuousDisplay',
                title: '连续'
            }],
            filterControl: true
        });

        // 筛选功能
        let selectedFilters = [];
        
        $('.continuous-filter').change(function() {
            selectedFilters = [];
            $('.continuous-filter:checked').each(function() {
                selectedFilters.push(parseInt($(this).val()));
            });

            $('#dataTable').bootstrapTable('filterBy', {
                continuous: selectedFilters
            }, {
                'filterAlgorithm': (row, filters) => {
                    if (filters.continuous.length === 0) return true;
                    return filters.continuous.includes(row.continuous);
                }
            });
        });
    });
    </script>

</body>
</html>